<template>
  <view class="clothes-category" :style="{ height: categoryBoxHeight + 'px' }">
    <!-- 左侧大类 -->
    <view class="category-text">
      <view
        v-for="category in categoryList"
        :key="category.id"
        :class="[
          'category-text-item',
          { active: activeCategory === category.id },
        ]"
        @click="handleCategoryClick(category)"
      >
        {{ category.name }}
      </view>
    </view>
    <!-- 右侧内容区 -->
    <view class="category-detail">
      <view class="type-tabs">
        <view
          v-for="(type, idx) in typeList"
          :key="type.indexId"
          :class="['type-tab', { active: activeTypeIndex === idx }]"
          @click="handleTypeClick(idx)"
        >
          {{ type.name }}
        </view>
      </view>
      <scroll-view
        scroll-y
        class="goods-container"
        :style="{ height: categoryBoxHeight + 'px' }"
        refresher-enabled="true"
        :refresher-triggered="refresherTriggered"
        @refresherrefresh="onPullDownRefresh"
      >
        <view v-if="loading" class="loading-box">
          <view class="loading-spinner"></view>
          <text class="loading-text">加载中...</text>
        </view>
        <view v-else>
          <view v-if="currentGoods.length > 0" class="goods-list">
            <view class="goods-list-box">
              <view
                v-for="goods in currentGoods"
                :key="goods.id"
                class="goods-item"
                @click="handleGoodsClick(goods)"
              >
                <image
                  :src="getFullImagePath(goods.image)"
                  mode="aspectFill"
                  class="goods-image"
                />
                <view class="goods-info">
                  <text class="goods-name">{{ goods.description }}</text>
                </view>
              </view>
            </view>
            <view class="bottom-title">没有更多数据了</view>
          </view>
          <view v-else class="empty-state">
            <image src="@/static/empty.png" class="empty-img" />
            <text class="empty-text">暂无商品数据</text>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { getClothesAPI } from "@/api/clothes";
import { avatarUrlImg } from "@/api/config/http";

const props = defineProps({
  categoryBoxHeight: Number,
});

const baseImageUrl = avatarUrlImg;
const getFullImagePath = (path: string) => {
  return path.startsWith("http") ? path : baseImageUrl + path;
};

const categoryList = ref<Array<{ id: number; name: string }>>([]);
const activeCategory = ref(0);
const typeList = ref<Array<{ indexId: number; name: string; clothes: any[] }>>(
  []
);
const activeTypeIndex = ref(0);
const currentGoods = ref<Array<any>>([]);
const loading = ref(false);
const refresherTriggered = ref(false);

const fetchTypeData = async (categoryId: number) => {
  loading.value = true;
  setTimeout(async () => {
    const response: any = await getClothesAPI();
    if (response.code === "200") {
      const category = response.data.find(
        (item: any) => item.id === categoryId
      );
      if (category) {
        typeList.value = category.type;
        activeTypeIndex.value = 0;
        currentGoods.value = typeList.value[0]?.clothes || [];
      } else {
        console.warn("未找到对应分类id:", categoryId);
      }
    }
    refresherTriggered.value = false;
    loading.value = false;
  }, 500);
};

const fetchData = async () => {
  loading.value = true;
  const response: any = await getClothesAPI();
  if (response.code === "200") {
    categoryList.value = response.data.map((item: any) => ({
      id: item.id,
      name: item.categoryName,
    }));
    if (categoryList.value.length > 0) {
      activeCategory.value = categoryList.value[0].id;
      await fetchTypeData(categoryList.value[0].id);
    }
  }
  loading.value = false;
};

const handleCategoryClick = (category: any) => {
  loading.value = true;
  activeCategory.value = category.id;
  activeTypeIndex.value = 0;
  fetchTypeData(category.id);
};

const handleTypeClick = (index: number) => {
  loading.value = true;
  activeTypeIndex.value = index;
  setTimeout(() => {
    currentGoods.value = typeList.value[index]?.clothes || [];
    loading.value = false;
  }, 500);
};

const onPullDownRefresh = () => {
  refresherTriggered.value = true;
  fetchTypeData(activeCategory.value);
};

const handleGoodsClick = (clothes: any) => {
  console.log("goods", clothes.id);
  uni.navigateTo({
    url: `/pages/clothespress/clothesDetail/clothesDetail?id=${clothes.id}`,
  });
};

onMounted(() => {
  fetchData();
});
</script>

<style scoped lang="scss">
.clothes-category {
  width: 100%;
  display: flex;

  .category-text {
    width: 25%;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    background-color: #eeefef;

    .category-text-item {
      height: 71rpx;
      line-height: 71rpx;
      color: #333333;
      font-size: 40rpx;
      text-align: center;
      background-color: #eeefef;

      &:active {
        opacity: 0.8;
        transform: scale(0.98);
      }

      &.active {
        background-color: #84b5a2 !important;
        color: #fff;
      }
    }
  }
}

.category-detail {
  display: flex;
  flex-direction: column;
  width: 80%;
}

.type-tabs {
  display: flex;
  padding: 10rpx;
  background: #fff;
  height: 60rpx;
  border-bottom: 1px solid #eee;
  flex-shrink: 0;

  .type-tab {
    padding: 10rpx 10rpx;
    margin-right: 20rpx;
    border-radius: 4rpx;
    background: #f5f5f5;
    color: #333;
    font-size: 28rpx;
    cursor: pointer;

    &.active {
      background: #92beab;
      color: #fff;
    }
  }
}

.goods-container {
  height: 100%;
  overflow-y: auto;
  padding: 20rpx;
}

.goods-list {
  display: flex;
  flex-direction: column;

  .goods-list-box {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20rpx;

    .goods-item {
      background: white;
      border-radius: 12rpx;
      overflow: hidden;
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);

      .goods-image {
        width: 100%;
        height: 300rpx;
      }

      .goods-info {
        padding: 16rpx;

        .goods-name {
          font-size: 28rpx;
          text-align: center;
          color: #333;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }
      }
    }
  }
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;

  .empty-img {
    width: 200rpx;
    height: 200rpx;
    margin-bottom: 20rpx;
  }

  .empty-text {
    font-size: 28rpx;
    color: #999;
  }
}

.bottom-title {
  height: 100rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20rpx;
  text-align: center;
  color: #999;
  font-size: 28rpx;
  margin-bottom: 15%;
}

.loading-box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;

  .loading-spinner {
    width: 48rpx;
    height: 48rpx;
    border: 6rpx solid #92beab;
    border-top: 6rpx solid transparent;
    border-radius: 50%;
    animation: spin 0.5s linear infinite;
    margin-bottom: 20rpx;
  }

  .loading-text {
    color: #92beab;
    font-size: 28rpx;
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
</style>
